<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    
    <style>
		.form-title{
			font-size:18px;
			height:32px;
			line-height:32px;
			font-family:'微软雅黑';
			margin-bottom:30px;	
			padding-bottom:7px;
			border-bottom:1px solid #EFEFEF;
		}
		.form-title .control-label{
			width:120px;
		}
		.form-title .controls{
			font-size:24px;
			color:#333333;
			margin-left:140px;
		}
		.add-on.warning{
			background:#F89406;
			border-color:#F89406;
		}
		.add-on.error{
			background:#B94A48;
		}
		.add-on.success{
			background:#35AA47;
		}
		.register.box{
			width:900px;
			margin:auto;
			margin-top:20px;
			padding:20px;
			background:#F9F9F9;
			border-radius: 4px 4px 4px 4px;
		}
	</style>
</head>
<body> 
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="register box">
  <form class="form-horizontal" method="POST" action="<%=basePath%>user/register.html" onsubmit="return checkAll()">
     <div class="form-title">
       	<label class="control-label"></label>
       	<div class="controls" >欢迎加入我们</div>
     </div>
    <div class="control-group">
      <label class="control-label" for="name">名称</label>
      <div class="controls" >
      	<div class="input-prepend">
       	 <span class="add-on"><i class="icon-user"></i></span>
         <input id="name" placeholder="网站显示名称，支持中文" class="input-xlarge" type="text" name="name" onblur="checkName()" value="${user.name }">
         <span id="name-icon" class="add-on warning"><i class="icon-warning-sign icon-white"></i></span>
      	</div>
      	<p class="help-block" id="name-info"></p>
      </div>
    </div>




    <div class="control-group">
      <!-- Prepended text-->
      <label class="control-label">常用邮箱</label>
      <div class="controls">
        <div class="input-prepend input-append">
          <span class="add-on"><i class="icon-envelope"></i></span>
          <input id="email" name="email" placeholder="常用邮箱" type="text" class="input-xlarge"  onblur="checkEmail()" value="${user.email }">
          <span id="email-icon" class="add-on warning"><i class="icon-warning-sign icon-white"></i></span>
        </div>
        <p class="help-block" id="email-info"></p>
      </div>

    </div>

    <div class="control-group">
      <label class="control-label" for="input01">密码</label>
      <div class="controls">
      	<div class="input-prepend">
      		<span class="add-on"><i class="icon-lock"></i></span>
	      	<input id="password" name="password" placeholder="密码" class="input-xlarge" type="password" onblur="checkPassword()">
	        <span id="password-icon" class="add-on warning"><i class="icon-warning-sign icon-white"></i></span>
      	</div>
        <p class="help-block" id="password-info"></p>
      </div>
    </div>

    <div class="control-group">
      <!-- Text input-->
      <label class="control-label">确认密码</label>
      <div class="controls">
        <div class="input-prepend">
      		<span class="add-on"><i class="icon-lock"></i></span>
	      	<input id="passwordc" placeholder="确认密码" class="input-xlarge" type="password" onblur="checkPasswordC()">
	      	<span id="passwordc-icon" class="add-on warning"><i class="icon-warning-sign icon-white"></i></span>
	        
      	</div>
      	<p class="help-block" id="passwordc-info"></p>
      </div>
    </div>
    
	<div class="control-group">
       <div class="controls">
         <button class="btn btn-success">注册</button>&nbsp;&nbsp;<span style="color:red">${error }</span>
       </div>
     </div>
  </form>
</div>
<script type="text/javascript">
var nameflag = false;
var emailflag = false;
var passwordflag = false;
var passwordcflag = false;

	$(document).ready(function(){
		var password = $("#password").val();
		var passwordc = $("#passwordc").val();
		var email = $("#email").val();
		var name = $("#name").val();
		
	    if(password!==''){
	    	checkPassword();
	    }
	    if(passwordc!==''){
	    	checkPasswordC();
	    }
	    if(email!==''){
	    	checkEmail();
	    }
	    if(name!==''){
	    	checkName();
	    }
	});
	function checkAll(){
		if(nameflag&&emailflag&&passwordflag&&passwordcflag){
			return true;
		}
		return false;
	}
	
	function checkPasswordC(){
		var password = $("#password").val();
		var passwordc = $("#passwordc").val();
		if(password!==passwordc){
			$("#passwordc-icon").removeClass("error");
			$("#passwordc-icon").removeClass("success");
			$("#passwordc-icon").removeClass("warning");
			$("#passwordc-icon").addClass("error");
			$("#passwordc-icon").html("<i class='icon-remove icon-white'></i>");
			$("#passwordc-info").html("<span class='label label-important'>两次密码不一样</span>");
			passwordcflag = false;
			return false;
		}else if(passwordc===''){
			$("#passwordc-icon").removeClass("error");
			$("#passwordc-icon").removeClass("success");
			$("#passwordc-icon").removeClass("warning");
			$("#passwordc-icon").addClass("warning");
			$("#passwordc-icon").html("<i class='icon-warning-sign icon-white'></i>");
			$("#passwordc-info").html("<span class='label label-warning'>密码不能为空</span>");
			passwordcflag = false;
			return false;
		}else{
			$("#passwordc-icon").removeClass("error");
			$("#passwordc-icon").removeClass("success");
			$("#passwordc-icon").removeClass("warning");
			$("#passwordc-icon").addClass("success");
			$("#passwordc-icon").html("<i class='icon-ok icon-white'></i>");
			$("#passwordc-info").html("");
			passwordcflag = true;
		}
	}

	function checkPassword(){
		var password = $("#password").val();
		if(password===''){
			$("#password-icon").removeClass("error");
			$("#password-icon").removeClass("success");
			$("#password-icon").removeClass("warning");
			$("#password-icon").addClass("warning");
			$("#password-icon").html("<i class='icon-warning-sign icon-white'></i>");
			$("#password-info").html("<span class='label label-warning'>密码不能为空</span>");
			passwordflag = false;
			return false;
		}else{
			$("#password-icon").removeClass("error");
			$("#password-icon").removeClass("success");
			$("#password-icon").removeClass("warning");
			$("#password-icon").addClass("success");
			$("#password-icon").html("<i class='icon-ok icon-white'></i>");
			$("#password-info").html("");
			passwordflag = true;
		}
		
	}

	function checkEmail(){
		var email = $("#email").val();
		if(email===''){
			$("#email-icon").removeClass("error");
			$("#email-icon").removeClass("success");
			$("#email-icon").removeClass("warning");
			$("#email-icon").addClass("warning");
			$("#email-icon").html("<i class='icon-warning-sign icon-white'></i>");
			$("#email-info").html("<span class='label label-warning'>Email 不能为空</span>");
			emailflag = false;
			return false;
		}
		if(!testEmail(email)){
			$("#email-icon").removeClass("error");
			$("#email-icon").removeClass("success");
			$("#email-icon").removeClass("warning");
			$("#email-icon").addClass("error");
			$("#email-icon").html("<i class='icon-remove icon-white'></i>");
			$("#email-info").html("<span class='label label-important'>Email格式不正确</span>");
			emailflag = false;
			return false;
		}
		var data = {"email":email};
		
		$.ajax({    
	        type: "GET",  
	        url:"<%=basePath%>user/checkemail.json",
	        contentType : 'application/json',
            data:data,
            dataType:'json',
	        success: function(response){ 
	        	if(response){
	        		if(response.ok){
		  				$("#email-icon").removeClass("error");
		  				$("#email-icon").removeClass("success");
		  				$("#email-icon").removeClass("warning");
		  				$("#email-icon").addClass("success");
		  				$("#email-icon").html("<i class='icon-ok icon-white'></i>");
		  				$("#email-info").html("");
		  				emailflag = true;
		  			}
		  			if(!response.ok){
		  				$("#email-icon").removeClass("error");
		  				$("#email-icon").removeClass("success");
		  				$("#email-icon").removeClass("warning");
		  				$("#email-icon").addClass("error");
		  				$("#email-icon").html("<i class='icon-remove icon-white'></i>");
		  				$("#email-info").html("<span class='label label-important'>用户名已经被注册</span>");
		  				emailflag = false;
		  			}
	        	}else{
	        		$("#email-icon").removeClass("error");
	  				$("#email-icon").removeClass("success");
	  				$("#email-icon").removeClass("warning");
	  				$("#email-icon").addClass("error");
	  				$("#email-icon").html("<i class='icon-warning-sign icon-white'></i>");
	  				$("#email-info").html("<span class='label label-warning'>网络异常,检查出错</span>");
	  				emailflag = false;
	        	}
	        },
		 	error: function(e){    }
		});
		
	}
	function checkName(){
		var name = $("#name").val();
		if(name===''){
			$("#name-icon").removeClass("error");
			$("#name-icon").removeClass("success");
			$("#name-icon").removeClass("warning");
			$("#name-icon").addClass("warning");
			$("#name-icon").html("<i class='icon-warning-sign icon-white'></i>");
			$("#name-info").html("<span class='label label-warning'>用户名不能为空</span>");
			nameflag = false;
			return false;
		}
		var data = {"name":name};
		$.ajax({    
	        type: "GET",  
	        url:"<%=basePath%>user/checkname.json",
	        contentType : 'application/json',
            data:data,
            dataType:'json',
	        success: function(response){  
	        	if(response){
	        		if(response.ok){
		  				$("#name-icon").removeClass("error");
		  				$("#name-icon").removeClass("success");
		  				$("#name-icon").removeClass("warning");
		  				$("#name-icon").addClass("success");
		  				$("#name-icon").html("<i class='icon-ok icon-white'></i>");
		  				$("#name-info").html("");
		  				nameflag = true;
		  			}
		  			if(!response.ok){
		  				$("#name-icon").removeClass("error");
		  				$("#name-icon").removeClass("success");
		  				$("#name-icon").removeClass("warning");
		  				$("#name-icon").addClass("error");
		  				$("#name-icon").html("<i class='icon-remove icon-white'></i>");
		  				$("#name-info").html("<span class='label label-important'>用户名已经被注册</span>");
		  				nameflag = false;
		  			}
	        	}else{
	        		$("#name-icon").removeClass("error");
	  				$("#name-icon").removeClass("success");
	  				$("#name-icon").removeClass("warning");
	  				$("#name-icon").addClass("error");
	  				$("#name-icon").html("<i class='icon-warning-sign icon-white'></i>");
	  				$("#name-info").html("<span class='label label-warning'>网络异常,检查出错</span>");
	  				nameflag = false;
	        	}
	  			
	        }, 
	        error: function(e){    }  
	  
	    });  
	}
	function testEmail(str){
		var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
		if(reg.test(str)){
		   return true;
		}else{
		   return false;
		}
	}
</script>
<jsp:include page="include/foot.jsp"></jsp:include>
</body>
</html>